import { View, Text, Picker, Image } from "@tarojs/components";
import { AtImagePicker } from "taro-ui";
import { useEffect, useRef, useState } from "react";
import "./index.scss";
import FormInput from "@/components/public/FormInput";
import FormTextarea from "@/components/public/FormTextarea";
import {
  back,
  getAddressArr,
  getAddressArrNew,
  toast,
  uploadFilesList,
} from "@/helper/utils";
import {
  addStore,
  authStore,
  getStoreDetail,
  indexGetDetail,
} from "@/services/entities/all";
import { getGlobalData } from "@/global_data";
import ico_list_map from "@/assets/image/ico_list_map.svg";
import { useRouter } from "@tarojs/taro";

const ShopVerifyPage = () => {
  const router = useRouter();
  const rawShopData = useRef<any>(null);
  const { params } = router;
  const { storeId, openId } = params;
  const [form, setForm] = useState({
    name: "",
    userName: "",
    contentDetail: "",
    phone: "",
    landPhone: "",
    address: "",
    addressPre: [],
    addressNext: "",
    wxCode: "",
    shopScope: "",
    imageUrl: [],
  });
  const getDetail = () => {
    getStoreDetail({ id: storeId }).then((res: any) => {
      rawShopData.current = res;
      const addressArr = res.address?.split(" ") ?? [];
      setForm({
        name: res.name,
        userName: res.userName,
        contentDetail: res.contentDetail,
        phone: res.phone,
        landPhone: res.landPhone,
        address: res.address,
        addressPre: getAddressArr(addressArr[0]),
        addressNext: addressArr[1],
        wxCode: res.wxCode,
        shopScope: res.shopScope,
        imageUrl: res.imageUrl ? res.imageUrl?.split(",") : [],
      });
    });
  };
  useEffect(() => {
    if (storeId && openId) {
      getDetail();
    }
  }, []);

  const onChange = (key, value) => {
    const temp = { ...form };
    temp[key] = value;
    setForm(temp);
  };

  const chooseImage = (key, value: any) => {
    uploadFilesList(value).then((res) => {
      onChange(
        key,
        res.map((item) => item.data)
      );
    });
  };

  const submit = () => {
    const userInfo = getGlobalData("userInfo");
    let addressArr = [];
    if (form.addressPre.length) {
      addressArr = getAddressArrNew(form.addressPre);
    }
    if (!form.name) {
      toast({ title: "请输入名称" });
      return;
    }
    if (!form.addressPre || !form.addressNext) {
      toast({ title: "请输入地址" });
      return;
    }
    if (!form.phone) {
      toast({ title: "请输入手机号" });
      return;
    }
    if (!form.shopScope) {
      toast({ title: "请输入经营范围" });
      return;
    }
    const result: any = {
      address: `${form.addressPre.join("")} ${form.addressNext}`,
      area: addressArr[2],
      city: addressArr[1],
      province: addressArr[0],
      imageUrl: form.imageUrl.join(","),
      landPhone: form.landPhone,
      name: form.name,
      openId: userInfo.openId,
      phone: form.phone,
      wxCode: form.wxCode,
      shopScope: form.shopScope,
      userName: form.userName,
      contentDetail: form.contentDetail,
    };
    if (storeId) {
      addStore({ ...rawShopData.current, ...result }).then(() => {
        back();
      });
    } else {
      authStore(result).then(() => {
        back();
      });
    }
  };

  return (
    <View className="shop-verify-container bg-page">
      <View className="flex-column">
        <Text className="mg-tb-24 ml-22 fs-24 lh-36 cl-A4A4A4">基本信息</Text>
        <FormInput
          value={form.name}
          label="商家名称"
          placeholder="请输入商家名称"
          onChange={(value) => {
            onChange("name", value);
          }}
        />
        <FormTextarea
          value={form.shopScope}
          label="经营范围"
          placeholder="请输入经营范围"
          onChange={(value) => {
            onChange("shopScope", value);
          }}
        />
        <View className="dis-flex pd-lr-26 border-box bg-ffffff">
          <View className="flex-1 fs-26 lh-32 cl-848484 pd-tb-24 border-box">
            所在地区：
          </View>
          <View
            className="border-bottom flex-3 fs-26 lh-32 cl-black pd-tb-24 border-box dis-flex align-center justify-between"
            // onClick={chooseLocation}
          >
            <Picker
              mode="region"
              value={form.addressPre}
              onChange={(e) => {
                onChange("addressPre", e.detail.value);
              }}
            >
              <View className="dis-flex align-center city">
                <Text className="fs-28 lh-38 cl-black">
                  {form.addressPre?.length
                    ? form.addressPre.join("")
                    : "选择省市区"}
                </Text>
              </View>
            </Picker>
            <Image src={ico_list_map} className="img-32" />
          </View>
        </View>

        <FormInput
          value={form.addressNext}
          label="详细地址"
          placeholder="请输入详细地址"
          onChange={(value) => {
            onChange("addressNext", value);
          }}
        />
        <View className="line"></View>
        <FormInput
          value={form.userName}
          label="联系人"
          placeholder="请输入联系人"
          onChange={(value) => {
            onChange("userName", value);
          }}
        />
        <FormInput
          value={form.contentDetail}
          label="活动信息"
          placeholder="请输入活动信息"
          onChange={(value) => {
            onChange("contentDetail", value);
          }}
        />
        <FormInput
          value={form.phone}
          label="手机号码"
          placeholder="请输入手机号码"
          type="number"
          onChange={(value) => {
            onChange("phone", value);
          }}
        />
        <FormInput
          value={form.landPhone}
          label="座机号码"
          placeholder="请输入座机号码"
          onChange={(value) => {
            onChange("landPhone", value);
          }}
        />
        <FormInput
          value={form.wxCode}
          label="微信号"
          placeholder="请输入微信号"
          onChange={(value) => {
            onChange("wxCode", value);
          }}
        />
        <Text className="mg-tb-24 ml-22 fs-24 lh-36 cl-A4A4A4">图片认证</Text>
        <View className="flex-column pl-4 pr-24 pd-tb-28 border-box bg-ffffff">
          <View className="dis-flex align-center justify-between">
            <Text className="mg-tb-28 pl-20 border-box fs-28 lh-36 cl-848484">
              商家图片
            </Text>
            <Text className="cl-E14848 fs-24 lh-32">
              注意：最多可以添加9张图片
            </Text>
          </View>
          <AtImagePicker
            files={form.imageUrl?.map((item) => {
              return { url: item };
            })}
            count={9}
            multiple={true}
            onChange={(files) => {
              chooseImage("imageUrl", files);
            }}
          ></AtImagePicker>
        </View>
      </View>
      <View className="bottom pd-20  dis-flex align-center border-box">
        <View
          className="flex-1 flex-center pd-tb-20 border-box bg-ffffff br-8 fs-28 lh-38 cl-848484"
          onClick={() => {
            back();
          }}
        >
          取消
        </View>
        <View className="empty"></View>
        <View
          className="flex-1 flex-center pd-tb-20 border-box bg-007DDB br-8 fs-28 lh-38 cl-white"
          onClick={submit}
        >
          提交
        </View>
      </View>
    </View>
  );
};

export default ShopVerifyPage;
